@extends('admin::layouts.app')

@section('content')
    <div class="container district">
        <div class="card">
            <div class="card-header">
                <h3 style="float: left;">地区管理</h3>
                <button type="button" @click="add()" class="btn btn-primary" style="float: right;">新建地区</button>
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>上级</th>
                        <th>地区编号</th>
                        <th>区号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        @foreach($areas as $v)
                            <tr>
                                <td>{{$v->id}}</td>
                                <td>{{$v->name}}</td>
                                <td>
                                    @if(isset($v->parent->name))
                                        <a href="{{route('admin.district',[$v->parent->parentid])}}">{{$v->parent->name}}</a>
                                    @else
                                        无
                                    @endif
                                </td>
                                <td>{{$v->code}}</td>
                                <td>{{$v->area_code}}</td>
                                <td>
                                    <a href="{{route('admin.district',[$v->id])}}" type="button" class="btn">下级</a>
                                    <button type="button" class="btn" @click="remove({{$v->id}})">删除</button>
                                    <button type="button" class="btn" @click="edit({{$v->id}})">修改</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                {{$areas->links()}}
            </div>
        </div>

        <confirm-component ref="confirm"></confirm-component>
    </div>
@endsection
@section('scripts')
    <script>
        new Vue({
            el:'#app',
            mounted() {

            },
            data() {
                return {

                }
            },
            methods:{
                remove(id) {
                    this.$refs.confirm.dialog('您确定要删除该信息吗？',() => {
                        axios.post('/admin/district/delete',{id:id}).then((response) =>{
                            if (response.status) {
                                window.location.reload();
                            }
                        }).catch(function (error){
                            console.log(error)
                        });
                    },function(){

                    });
                },
                add() {
                    var parentid = '{{$parentid}}';
                    $('#district-form').remove();
                    axios.get('{{route('admin.district.form')}}',{params:{parentid:parentid}}).then((response) => {
                        $('.container.district').append(response.data);
                        $('#district-form').modal('show');
                    }).catch((error) => {
                        console.log(error)
                    });
                },
                edit(id) {
                    $('#district-form').remove();
                    axios.get('{{route('admin.district.form')}}/' + id).then((response) => {
                        $('.container.district').append(response.data);
                        $('#district-form').modal('show');
                    }).catch((error) => {
                        console.log(error)
                    });

                },
            }
        });
    </script>
@endsection
